<template>
  <div class="me">
    <span class="iconfont" @click="run">&#xe78e;</span>
    <userVue></userVue>
    <div class="order">
      <!-- 我的订单 -->
      <van-cell is-link title="我的订单" @click="skip" />
      <van-grid>
      <van-grid-item icon="balance-list-o" text="待付款" />
      <van-grid-item icon="send-gift-o" text="待发货" />
      <van-grid-item icon="logistics" text="待收货" />
      <van-grid-item icon="sign" text="已完成" />
      </van-grid>
    </div>
        <div class="coupon">
      <!-- 我的订单 -->
      <van-cell is-link title="我的优惠卷" @click="coupon" />
      <van-grid :column-num="3">
      <van-grid-item icon="peer-pay" text="待使用" />
      <van-grid-item icon="balance-pay" text="已使用" />
      <van-grid-item icon="failure" text="过期关闭" />
      </van-grid>
    </div>
    <div class="router">
      <van-cell title="我的收藏" is-link to="" icon="star-o" />
      <van-cell title="收货地址" is-link to="" icon="free-postage"/>
      <van-cell title="服务中心" is-link to="" icon="service-o"/>
    </div>
  </div>
</template>

<script>
import { getinformation } from '@/api/handpick'
import userVue from '@/components/user.vue'
export default {
  name: 'MeVue',
  data () {
    return {
    }
  },
  components: {
    userVue
  },
  mounted () {
    this.src = window.localStorage.getItem('avatar')
  },
  methods: {
    skip () {
      this.$router.push('')
    },
    coupon () {
      this.$router.push('')
    },
    run () {
      this.$router.push('/me/information')
      //  这里要调取数据
      const token = window.localStorage.getItem('Authorization')
      getinformation(token).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user{
  background:url('@/assets/我的背景图.png');
   background-size:100%  4rem;
   margin-bottom: .3rem;
}
.me{
  background-color: #eee;
}
@font-face {
  font-family: 'iconfont';
  src: url('@/assets/font/iconfont.woff2') format('woff2'),
       url('@/assets/font/iconfont.woff') format('woff'),
       url('@/assets/font/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: .8rem;
  font-style: normal;
  float: right;
  margin: .2rem;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.order,.coupon{
  margin-bottom: .2rem;
}
</style>
